<style>
  .tool_dail {
    color: #2D8cF0;
    background: transparent;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: color 0.2s ease;
  }
</style>
<template>
  <!-- 申请工具清单 -->
  <div id="toolInfo">
    <div class="gcontent" style="padding-left: 30px;" v-if="toolInfo.toolList && toolInfo.toolList.length > 0 ">
      <div style="margin-top: 30px;" v-for="(item,index) in toolInfo.toolList">
        <div style="background-color:#2d8cf0;font-size: 14px; font-weight: bold;">
          <div style="padding-left: 5px;margin-left: 2px;background-color:#fff;">
            <p>{{item.clazz}}</p>
          </div>
        </div>
        <Form :label-width="labelWidth" class="form form_left ">
          <div v-for="(tool,toolIndex) in item.toolList">
            <Row style="padding-top: 15px">
              <Col span="22">
              <Checkbox class="font_seize" v-model="toolInfo.toolList[index].toolList[toolIndex].check"
                @on-change="chackeTool(tool.id)" :disabled="ifedit">
                {{tool.toolName}}
              </Checkbox>
              <Tooltip :content="tool.des === undefined || tool.des === null ||  tool.des === '' ? '暂无信息':tool.des"
                max-width="400" placement="right" :transfer="true" style="white-space: normal;position: absolute;width: 20px;">
                <Icon type="md-help-circle" />
              </Tooltip>
              </Col>
            </Row>
            <template
              v-if='tool.check && tool.spServiceType != "dataEtl" && ((tool.needResources && tool.needResources.length > 0) || (tool.needSevers && tool.needSevers.length > 0))'>
              <Row style="padding-top: 8px;padding-left:8px">
                <Col span="10">
                <RadioGroup v-model="tool.defaultResourcesModel" @on-change="chackeTool" v-if="!ifedit">
                  <Radio v-for="model in tool.packageLists" :label="model.modelName">{{model.modelName}}</Radio>
                </RadioGroup>
                <i-switch v-model="tool.default" @on-change="chackeTool" v-if="!ifedit">
                  <span slot="open">自定义</span>
                </i-switch>
                <span v-if="ifedit">{{tool.defaultResourcesModel}}{{tool.default?"(自定义)":"(默认)"}}</span>
                </Col>
                <Col style="width: 97%;">
                <template v-for="(model, modelIndex) in tool.packageLists">
                  <div v-if="tool.defaultResourcesModel == model.modelName">
                    <resourceTable v-if="model.package.toolServiceList.length > 0" :key="modelIndex" :ifedit="ifedit" :type="'tool'"
                      :isEditTool="tool.default" v-model="model.package.toolServiceList"
                      :columnsList="toolInfo.toolColumns"></resourceTable>

                    <Row style="padding-top: 8px;width: 100%;" v-if="model.package.severs.length > 0">
                      <severModel v-model="model.package.severs" :ifedit="ifedit" :tool="tool" :allServerList="allServerList" type="tool" :isEditTool="tool.default">
                      </severModel>
                    </Row>
                  </div>
                </template>
                </Col>
              </Row>

            </template>
            <Row style="padding-top: 8px;padding-left:8px"
              v-if=' tool.check && tool.spServiceType === "openApiPlatform" '>
              <Col  style="width: 97%;">
              <open_api_platform_model :key="openApiPlatformKey" :projectId="Papply.projectInfo.projectId" :ifedit="ifedit"
                v-model="toolInfo.toolList[index].toolList[toolIndex]"></open_api_platform_model>
              </Col>
            </Row>
            <Row style="padding-top: 8px;padding-left:8px" v-if=' tool.check && tool.spServiceType === "dataEtl" '>
              <Col style="width: 97%;">
              <ucx_model :ifedit="ifedit" :isEdit="isEdit" v-model="toolInfo.toolList[index].toolList[toolIndex]"
                :Papply="Papply" :columnsList="toolInfo.toolColumns"></ucx_model>
              </Col>
            </Row>
          </div>
        </Form>
      </div>
    </div>
    <div v-else class="gcontent" style="text-align:center">
      <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无申请工具</span>
    </div>
  </div>
</template>
<script>
  import ajax from "../../../ajax_util"
  import Axios from 'axios'
  import resourceTable from "../../../base/tables"
  import open_api_platform_model from "../apply_model/open_api_platform_model/open_api_platform.vue"
  import ucx_model from "../apply_model/ucx_model/ucx.vue"
  import severModel from "../apply_model/server_model.vue"
  export default {
    name: "apply",
    components: {
      resourceTable,
      open_api_platform_model,
      ucx_model,
      severModel
    },
    data() {

      return {
        openApiPlatformKey: 0,
        date: new Date(),
        dataInfoEdit: 0,
        readonly: true, //是否只读
        labelWidth: 140,

        //工具相关基础信息
        toolInfo: [],
        //数据相关基础信息
        applyinfo: this.Papply,
        checkToolId: -1,
        checkList: []
      }
    },
    // updated:function(){
    //   this.$forceUpdate()
    // },

    created: function() {
      console.log("watch----2-----", this.ifedit, this.Ptool, this.tempTool)
      //是否可以编辑,可以编辑显示全部信息，不可编辑显示订购的工具

      if (this.ifedit) {
        var temp = JSON.stringify(this.Ptool)
        this.toolInfo = JSON.parse(temp)
        if (this.tempTool.length > 0) {
          this.toolInfo.toolList = this.tempTool
        } else {
          this.setTempTool(this.toolInfo.toolList)
        }
      } else {
        this.toolInfo = this.Ptool
      }
      // if(this.reqId){
      //   this.getDetail(this.toolInfo)
      // }
      console.log("watch----3----", this.toolInfo)
    },
    mounted: function() {
    },
    methods: {
      /**
       * 获取总览数据
       * @param {Object} tool
       */
      getGeneral(tool) {
        console.log("Papply   ", this.Papply.projectInfo.projectId)
        if (!this.Papply.projectInfo.projectId) {
          this.$Message.info("选择入驻项目后才可查看!")
        }
      },
      /**
       * 获取概览数据
       * @param {Object} tool
       */
      getDetail(toolList) {
        console.log(toolList)
        toolList.toolList.forEach(tool => {
          tool.toolList.forEach(item => {
            if (item.check && item.spServiceType === "openApiPlatform") {
              var param = {
                spServiceType: item.spServiceType,
                alloId: item.reqId
              }
              var that = this
              this.myAjax.get({
                url: this.CONFIG.progress_url + "/sp-list/detail",
                that: that,
                params: param,
                success: function(data) {

                  if (data.hasAccount) {
                    data.hasAccount = 1
                  } else {
                    data.hasAccount = 0
                  }
                  that.$set(item, "spContent", data)
                  that.openApiPlatformKey = new Date().getTime()
                },
              })
            }
          })
        })
      },
      /**
       * 获取申请得开发平台数据接口
       */
      getAPIService() {
        var apiService = []
        this.toolInfo.toolList.forEach(toolList => {
          toolList.toolList.forEach(item => {
            if (item.check && item.spServiceType === "openApiPlatform") {
              if (item.spContent.datas) {
                apiService = item.spContent.datas
              }
            }
          })
        })
        console.log("apiServiceList ------------>", apiService)
        return apiService;
      },
      updateToolList() {
        this.$emit("Ptool", this.toolInfo);
      },
      /**
       * 分组
       * @param {Object} toolList
       */
      setTempTool(toolList) {
        console.log("setTempTool----2-----", toolList)
        var temp = []
        toolList.forEach(tool => {
          tool.toolList.forEach(item => {
            if (item.check) {
              console.log("item---->", item)
              if (item.needResources) {
                item.needResources.forEach(i => {
                  console.log("i---->", i)
                  i.quotaValue = i.val
                  i.quotaUnit = i.unit
                })
              }
              if (temp.find(e => e.clazz == item.clazz)) {
                temp.find(e => e.clazz == item.clazz).toolList.push(item)
              } else {
                temp.push({
                  clazz: item.clazz,
                  toolList: [item]
                })
              }
            }
          })
        })
        console.log("temp = temp = ", JSON.stringify(temp))
        this.toolInfo.toolList = temp
      },
      clicks(index) {
        if (this.clickindex === index) {
          if (this.click) {
            this.click = false
          } else {
            this.click = true
          }
        } else {
          if (!this.click) {
            this.click = true
          }
        }
        this.clickindex = index;
      },
      // 选择工具
      chackeTool(id) {
        console.log("id = ", id)
        this.$forceUpdate()
      },
      // 处理工具信息
      getTool() {
        var temp = []
        this.toolInfo.toolList.forEach(toolList => {
          toolList.forEach(item => {
            if (item.check) {
              temp.push(tool)
            }
          })
        })
        console.log("tool--Check--->", temp)
        return temp
      },
      //格式化日期
      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        var hours = this.padDate(date.getHours());
        var minutes = this.padDate(date.getMinutes());
        var seconds = this.padDate(date.getSeconds());
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },
    },
    props: {
      allServerList:{},
      reqId: {},
      isEdit: {},
      ifedit: {},
      Papply: {},
      Ptool: {},
      tempTool: {},
      apiServiceList: {}
    },
    computed: {
      temp() {
        return this.ifedit
      }
    },
    watch: {
      temp(newV, oldV) {
        console.log("watch---222------", newV, this.Ptool)
        if (!this.ifedit) {
          this.toolInfo = this.Ptool
        } else {
          this.toolInfo = this.tempTool
        }
        // this.$forceUpdate()
      }
    }
  }
</script>
